<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入巡检任务名称" clearable v-model="taskName" size="small" style="width: 180px" class="mRight10"> </el-input>
          <el-date-picker style="width: 200px" value-format="yyyy-MM-dd HH:mm:ss" v-model="taskTime" type="date" size="small" placeholder="请选择任务时间" class="mRight10" clearable> </el-date-picker>

          <el-select v-model="taskStatus" placeholder="请选择任务状态" size="small" style="width: 140px" class="mRight10" clearable>
            <el-option v-for="item in taskStatusOpts" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-select v-model="taskType" placeholder="请选择任务类型" size="small" style="width: 140px" class="mRight10" clearable>
            <el-option v-for="item in taskTypesOpts" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <!-- <el-select v-model="inspType" placeholder="请选择巡检类型" size="small" style="width: 140px;" class="mRight10">
            <el-option v-for="item in inspTypeOpts" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          -->
          <el-button type="primary" size="small" @click="queryForPage(1)"> 查询 </el-button>
        </div>
        <!-- 暂时去掉新增 -->
        <!-- <div class="insp-header-right">
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">新增任务</el-button>
        </div> -->
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table
          :data="tableData"
          stripe
          :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }"
          max-height="660px"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="props.row.itemList"
                :header-cell-style="{
                  color: '#999',
                  height: '44px',
                }"
                style="width: 100%; border: 1px solid #ebeef5; border-bottom: 0"
                class="insp-table-expand"
              >
                <el-table-column label="桥梁名称" prop="ownName" show-overflow-tooltip></el-table-column>
                <el-table-column label="巡检项名称" prop="name" show-overflow-tooltip></el-table-column>
                <el-table-column label="巡检规范" property="inspStandard" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span> {{ inspStandardText(scope.row.inspStandard) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="巡检人员" property="itemUserList" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span> {{ inspPersonText(scope.row.itemUserList) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="开始时间" prop="sdt" show-overflow-tooltip></el-table-column>
                <el-table-column label="结束时间" prop="edt" show-overflow-tooltip></el-table-column>
                <el-table-column label="任务周期" prop="duration" show-overflow-tooltip></el-table-column>
                <!-- <el-table-column label="实际开始时间" prop="realSdt" show-overflow-tooltip></el-table-column> -->
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="任务名称" show-overflow-tooltip></el-table-column>
          <el-table-column property="inspType" label="巡检类型" width="100">
            <template slot-scope="scope">
              <label :class="['insp-table-label', inspTypeClass(scope.row.inspType)]">
                {{ inspTypeText(scope.row.inspType) }}
              </label>
            </template>
          </el-table-column>
          <el-table-column property="createType" label="任务类型">
            <template slot-scope="scope">
              <span>{{ taskTypeText(scope.row.createType) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务状态" property="staFlag" show-overflow-tooltip>
            <template slot-scope="scope">
              <label :class="['insp-table-label', taskStatusClass(scope.row.staFlag)]">
                {{ taskStatusText(scope.row.staFlag) }}
              </label>
            </template>
          </el-table-column>
          <el-table-column prop="sdt" label="任务时间" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="详情">
                <el-button type="text" icon="el-icon-document" @click="handelEdit(scope.row.id)"> </el-button>
              </el-tooltip>
              <!-- <el-tooltip content="结束任务">
                <el-button type="text" icon="el-icon-circle-check" @click="handelTaskStatus(scope.row.id)"> </el-button>
              </el-tooltip> -->
              <!-- <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important" @click="handelDelete(scope.row.id)"> </el-button>
              </el-tooltip> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
          :page-size="pageSize"
          :total="recordsTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 新增/编辑任务-->
    <AddInspTask ref="addInspTaskChild" @closeAddInspTask="handleClose" :createType="4"></AddInspTask>
  </div>
</template>
<script>
import AddInspTask from './components/addInspTask'
export default {
  data() {
    return {
      pageSize: 14,
      currentPage: 1,
      recordsTotal: 0,
      taskName: '',
      taskTime: '',
      inspType: '',
      taskStatus: '',
      taskType: '',

      tableData: [],
      inspTypeOpts: [
        {
          label: '日常巡检',
          value: 0,
        },
        {
          label: '定期巡检',
          value: 1,
        },
        // , {
        //   label: '特殊巡检',
        //   value: 2
        // }
      ],
      taskStatusOpts: [
        {
          label: '计划中',
          value: 0,
        },
        {
          label: '进行中',
          value: 1,
        },
        {
          label: '已完成',
          value: 2,
        },
      ],
      taskTypesOpts: [
        // {
        //   label: '模板任务',
        //   value: 1,
        // },
        {
          label: '定时任务',
          value: 2,
        },
        // {
        //   label: '快速任务',
        //   value: 3,
        // },
        {
          label: '临时任务',
          value: 4,
        },
      ],

      dialogDetailVisible: false,
      activeDetailName: 'basicInfo',
      detailGroup: [
        {
          name: '取消',
          type: 'border',
          funName: 'cancelDetail',
        },
      ],
    }
  },
  components: {
    AddInspTask,
  },
  watch: {
    $route(to, from) {
      this.queryForPage(1)
    },
  },
  created() {
    this.getNewDate()
    this.queryForPage(1)
  },
  methods: {
    handleAdd() {
      this.$refs.addInspTaskChild.add()
    },
    handelDelete(val) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.insp.deleteTask(val).then((response) => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: 'success',
                icon: 'success',
              })
              this.queryForPage()
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize)
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage)
            } else {
              this.$vs.notify({
                text: '删除失败',
                color: 'danger',
              })
            }
          })
        })
        .catch(() => {
          this.$vs.notify({
            text: '已取消删除',
            color: 'primary',
          })
        })
    },
    handelEdit(val) {
      this.$refs.addInspTaskChild.edit(val)
    },
    handelTaskStatus(val) {
      this.$confirm('此操作将结束任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.insp.editTaskStatus(val, 2).then((response) => {
            if (response.data.success) {
              this.$vs.notify({
                text: '任务结束成功',
                color: 'success',
                icon: 'success',
              })
              this.queryForPage(1)
            } else {
              this.$vs.notify({
                text: '任务结束失败',
                color: 'danger',
              })
            }
          })
        })
        .catch(() => {
          this.$vs.notify({
            text: '已取消',
            color: 'primary',
          })
        })
    },
    queryForPage(pageIndex) {
      let _userInfo = JSON.parse(localStorage.getItem('userInfo'))
      if (pageIndex && pageIndex === 1) {
        this.currentPage = 1
      }
      const _params = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        data: {
          name: this.taskName,
          staFlag: this.taskStatus,
          createType: this.taskType,
          sdt: this.taskTime || '',
          userId: _userInfo['userid'] || '',
        },
      }
      this.$api.insp.queryTaskPage(_params).then((response) => {
        if (response.data.success) {
          this.tableData = response.data.data || []
          this.tableData.map((item) => {
            item.sdt = item.sdt.substring(0, 10)
          })
          // yyyy-MM-dd
          this.recordsTotal = response.data.recordsTotal
        }
      })
    },
    // 进来页面查询当天任务
    getNewDate() {
      var nowDate = new Date()
      var year = nowDate.getFullYear()
      var month = nowDate.getMonth() + 1 < 10 ? '0' + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1
      var day = nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate()
      this.taskTime = year + '-' + month + '-' + day + ' ' + '00:00:00'
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage
      this.queryForPage()
    },
    handleClose() {
      this.queryForPage(1)
    },
    inspPersonText(list) {
      let _text = ''
      list.forEach((item, index) => {
        if (!index) {
          _text += item.userName
        } else {
          _text += `、${item.userName}`
        }
      })
      return _text
    },
    inspStandardText(type) {
      switch (type) {
        case 0:
          return '城市桥梁'
        case 1:
          return '道路桥梁'
      }
    },
    taskTypeText(type) {
      switch (type) {
        case 1:
          return '模板任务'
        case 2:
          return '定时任务'
        case 3:
          return '快速任务'
        case 4:
          return '临时任务'
      }
    },
    inspTypeClass(type) {
      switch (type) {
        case 0:
          return 'inspTypeA'
        case 1:
          return 'inspTypeB'
        case 2:
          return 'inspTypeC'
      }
    },
    inspTypeText(type) {
      switch (type) {
        case 0:
          return '日常巡检'
        case 1:
          return '定期巡检'
        case 2:
          return '特殊巡检'
      }
    },
    taskStatusClass(type) {
      switch (type) {
        case 1:
          return 'planStatusA'
        case 2:
          return 'planStatusB'
        case 3:
          return 'planStatusC'
        case 4:
          return 'planStatusD'
        case 5:
          return 'planStatusB'
        case 6:
          return 'planStatusC'
      }
    },
    taskStatusText(type) {
      switch (type) {
        case 0:
          return '计划中'
        case 1:
          return '进行中'
        case 2:
          return '已完成'
      }
    },

    handleTabDetailClick(tab, event) {
      this.activeDetailName = tab.name
    },
    // YU 修改
    timestampToTime(row, column) {
      console.log('row.date')
      //20200904针对str类型的时间进行格式转换
      // var date = row.date
      // var year = date.substr(0, 4)
      // var month = date.substr(4, 2)
      // var day = date.substr(6, 2)
      // var start = date.substr(9, 5)
      // var end = date.substr(15, 5)
      // var time = date.substr(9)
      // return year + '年' + month + '月' + day + '日' + ' ' + start + '~' + end

      //针对时间挫进行格式转换
      // let date1 = date.split(' ')[0]
      // var Y = date1.getFullYear() + '-'
      // var M =
      //   (date.getMonth() + 1 < 10
      //     ? '0' + (date.getMonth() + 1)
      //     : date.getMonth() + 1) + '-'
      // var D = date.getDate() + ' '
      // var h = date.getHours() + ':'
      // var m = date.getMinutes() + ':'
      // var s = date.getSeconds()
      // return Y + M + D + h + m + s
    },
    dateTimeFormat(value) {
      var time = new Date(+value)
      var rightTwo = (v) => {
        v = '0' + v
        return v.substring(v.length - 2, v.length)
      }
      if (time == null) return
      var year = time.getFullYear()
      var month = time.getMonth() + 1
      var date = time.getDate()
      var hours = time.getHours()
      var minutes = time.getMinutes()
      var seconds = time.getSeconds()
      return year + '-' + rightTwo(month) + '-' + rightTwo(date) + ' ' + rightTwo(hours) + ':' + rightTwo(minutes) + ':' + rightTwo(seconds)
    },
  },
}
</script>
<style scoped lang="scss">
@import './insp.scss';

/deep/.el-table__header tr,
/deep/.el-table__header th {
  padding: 0;
  height: 44px;
}

/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
  font-size: 14px;
}

/deep/.el-table th {
  font-weight: 500;
  color: #fff;
}

/deep/.el-table td {
  font-weight: 400;
  color: #444;
  padding: 0;
  height: 44px;
  line-height: 44px;
}

/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f1f5fc;
}

/deep/.el-table__expanded-cell {
  padding: 20px !important;
}

/deep/.el-button--mini.insp-task-addBtn {
  padding: 6px;
  font-size: 18px;
  font-weight: bolder;
}

/deep/.insp-plan-detailTabs .el-tabs__header {
  padding: 0;
  margin: -20px 0 0;
  background: #fff;
}

/deep/.insp-plan-detailTabs .el-tabs__item {
  font-size: 14px;
  font-weight: 400;
  color: #999;
  position: relative;

  text-align: center;
}

/deep/.insp-plan-detailTabs .el-tabs__active-bar {
  width: 12px !important;
  background-color: #327bdc;

  left: 28px;
  margin-left: -6px;
}

/deep/.insp-plan-detailTabs .el-tabs__content {
  min-height: 250px;
}

/deep/.el-tabs__item.is-active {
  color: #327bdc;
}
</style>
